<template>
  <div class="dataCenterIndex" style="height: 100%">
    <el-row style="height: 100%" >
      <el-col :span="6" style="height: 100%;border-right: 1px solid #eee;overflow: scroll">
        <CommonTree label-name="对象资源管理" :tree-props="treeProps" :data="treeData" @treeChange="treeChange"></CommonTree>
      </el-col>
      <el-col :span="18" v-if="!button || button.event!='query()' ">
        <CommonBtn label-name="表结构描述" :buttons="buttons" @onButtonClick="onButtonClick"></CommonBtn>
        <CommonList :list-url="listUrl" :conditions="conditions" :columns="columns" ref="list"></CommonList>
      </el-col>

      <el-col :span="18" v-if="button && button.event=='query()' ">
        <CommonBtn label-name="后台sql执行<span style='color:red'> 注：SQL 查询（最大显示500条）</span>">
          <el-select slot="appendCondition" value='1' size="mini">
            <el-option label="查询列表" value="1"></el-option>
            <el-option label="更新与删除" value="2"></el-option>
          </el-select>
          <el-button slot="appendCondition" @click="execSql">执行</el-button>
          <el-button slot="appendCondition" @click="button = null">返回</el-button>
        </CommonBtn>
        <el-input type="textarea" resize="none" :rows="6" v-model="sql"></el-input>
        <el-table
          :data="queryData" tooltip-effect="dark"
          style="width: 100%">
          <el-table-column v-for="(item,index) of queryColumns" :key="index"
            :prop="item"
            :label="item" show-overflow-tooltip>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import CommonTree from "../../common/CommonTree";
  import CommonBtn from "../../common/CommonBtn";
  import CommonList from "../../common/CommonList";
  export default {
      data(){
        return{
            treeProps: {
                children: 'children',
                label: 'TABLE_NAME'
            },
            treeData:[],
            listUrl:this.$api.API_RMBASE_SYSTEM_SELECT_TABLE,
            conditions:[],
            buttons:[
                this.$config.BTNS.NEWQUERY
            ],
            columns:[
                {label:'字段名',prop:'列名'},
                {label:'数据类型',prop:'数据类型'},
                {label:'长度',prop:'长度'},
                {label:'允许空',prop:'是否为空'},
                {label:'默认值',prop:'默认值'},
                {label:'字段说明',prop:'说明'},
            ],
            button:null,
            tableName:'',
            queryData:[],
            queryColumns:[],
            sql:''
        }
      },
      methods:{
          onButtonClick(item) {
              this.button = item
          },
          initData(){
              this.$http.get(this.$api.API_RMBASE_SYSTEM_SELECT_DB).then(resp=>{
                  let parent = {TABLE_NAME:'RM_DB',children:resp}
                  this.treeData.push(parent)
              },msg=>{})
          },
          treeChange(item) {
              this.tableName = item.TABLE_NAME
              this.conditions = []
              this.conditions.push({checked:true,prop:'tableName',value:item.TABLE_NAME})
              this.$nextTick(()=>{
                  this.$refs.list.search()
              })
          },
          execSql() {
              this.$http.post(this.$api.API_RMBASE_SYSTEM_EXEC_SQL,{sql:this.sql}).then(resp=>{
                  if (resp!=null && resp.length>0) {
                     let temp = resp[0]
                      this.queryColumns = Object.keys(temp)
                  }
                  this.queryData = resp
              },msg=>{})
          }
      },
      created(){
          this.initData()
      },
      components:{CommonList, CommonBtn, CommonTree}
  }
</script>
